import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import { Teleport } from 'vue'
import { CloseCircleFilled, LoadingOutlined, ZoomInOutlined } from '@ant-design/icons-vue'

@Component
export class PreviewExcel extends Render {
    @Prop() src!: string

    isShow = false
    isLoading = false

    get name() {
        return this.src.split('/').pop()?.split('.')[0]
    }

    onRendered() {
        console.log('渲染完成')
        this.isLoading = false
    }

    onError() {
        console.log('渲染失败')
        this.isLoading = false
    }

    onPreview(ev: Event) {
        ev.stopPropagation()
        this.isShow = true
        this.isLoading = true
    }

    onClose() {
        this.isShow = false
        this.isLoading = false
    }

    render() {
        return (
            <>
                <div class={'inline-block cursor-pointer flex items-baseline hover:text-blue-100'}>
                    <span class="mr-5px" onClick={this.onPreview}>{this.name}</span>
                    <ZoomInOutlined class="mt-5px"/>
                </div>
                <Teleport to="body">
                    {this.isShow && (
                        <div class="fixed left-0 top-0 w-screen h-screen bg-black bg-opacity-50 z-10000">
                            <div
                                class="fixed top-20px right-20px z-10001 cursor-pointer text-30px"
                                onClick={this.onClose}
                            >
                                <CloseCircleFilled/>
                            </div>
                            {this.isLoading && (
                                <div class="fixed z-10001 text-50px left-1/2 top-1/3 transform -translate-1/2 ">
                                    <LoadingOutlined />
                                </div>
                            )}
                            <VueOfficeExcel
                                src={this.src}
                                crossorigin="anonymous"
                                onRendered={this.onRendered}
                                onError={this.onError}
                            />
                        </div>
                    )}
                </Teleport>
            </>
        )
    }
}

export default toNative<{ src: string }, {}>(PreviewExcel)
